dd.project.app({
    init:function()
    {
        var paper = dd(dd.html.body).svg();
        dd(paper).defs({
            linearGradient:{
                button_normal:{
                    x1:"0",y1:"0",x2:"0",y2:"100%",
                    stop:[
                        {color:"#ffffff"},
                        {color:"#e5e5e5"}
                    ]
                },
                button_hover:{
                    x1:"0",y1:"0",x2:"0",y2:"100%",
                    stop:[
                        {color:"#eeeeee"},
                        {color:"#dddddd"}
                    ]
                }
            }
        });
        var r = 10;
        var style = {
            stroke:{
                width:2,color:"#F0F"
            },
            fill:{
                color:"url(#button_normal)"
            }
        };
        var line = dd.moveTo(10, 10)
                     .lineTo(40, 0)
                     .curveTo(0.554 * r, 0, r, 0.446 * r, r, r);
        dd(paper).path(line, style);
        var rect = dd(paper).rect(40.5, 40.5, 80, 20, {r:3,stroke:"#ddd",fill:{color:"url(#button_normal)"}});
        dd(rect).event({
            onMouseOver:function()
            {
                dd(this).svg({fill:"url(#button_hover)", stroke:"#aaa", width:20});
            },
            onMouseOut:function()
            {
                dd(this).svg({fill:"url(#button_normal)", stroke:"#ddd", width:80});
            }
        });
        dd(window).event({
            onResize:function()
            {
                //alert(this.screen.width + " " + this.screen.height);
            }
        });
    }
});